iT邦幫忙

2022 iThome 鐵人賽

DAY 2
0
自我挑戰組

網頁設計相關系列 第 2

<Day2> 網頁設計自學筆記/HTML開發環境、入門

  • 分享至 

  • xImage
  •  

不同的語言有自己的開發環境,HTML的開發環境相對簡單,我使用的是Visual Studio Code(VScode)並用 Google 旗下的 Chrome 瀏覽器呈現。Google 搜尋引擎的封面也就是最為人所知的這個頁面,
https://ithelp.ithome.com.tw/upload/images/20220914/201523653jsPVkoWuo.jpg
可按右鍵檢視它的HTML Code,
https://ithelp.ithome.com.tw/upload/images/20220914/20152365GWsujvG0QY.jpg
這坨Code經過Google伺服器的一番處理後,便會轉變成我們常見的那美美的樣子。
我們該從何著手呢?


首先我們在VScode開一個名為challenge的html的檔案並寫入以下的Code,會有這樣的呈現,
https://ithelp.ithome.com.tw/upload/images/20220914/20152365sgK3Ze3cyK.jpg
https://ithelp.ithome.com.tw/upload/images/20220914/20152365lcq3OnXOoB.jpg
p字可解釋成Paragraph,而被<>包圍著的p表示著開始,帶斜線的/p則表示結束,這些像代碼的東西被Google 的Server認出來後,就會以Opening Tag和Closing Tag被解讀,也就不會被顯示在網頁上。


HTML是組織網頁結構的語言,運用不同種類的標籤組成,屬巢狀結構,可以層層包裹住一個一個的元素,接下來會介紹更詳盡的HTML。


上一篇
<Day1> 網頁設計自學筆記/前言
下一篇
<Day3> 網頁設計自學筆記/HTML Tag
系列文
網頁設計相關5
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言